<template>
  <div>
    <nav class="con">
      <mt-navbar
        v-model="selected"
        class="list"
        @touchmove.native="move($event)"
        @touchstart.native="start($event)"
        :style="{'left':left+'px'}"
        ref="lis"
      >
        <!-- 导航 -->
        <mt-tab-item :id="k" v-for="(v,k,i) in tems" :key="i">{{v}}</mt-tab-item>
      </mt-navbar>
    </nav>
    <component :is="selected"></component>
    <!-- <p>{{left}}</p> -->
    <!-- 内容 -->
    <!-- <mt-tab-container v-model="selected">
      <mt-tab-container-item :id="i" v-for="(v,k,i) in tems" :key="i">
        <my-hot></my-hot>
        <p>{{selected}}</p> 
        <component v-bind:is="selected"></component>
        <mt-cell v-for="n in 20" :title="n  + v" :key="n" />
      </mt-tab-container-item>
    </mt-tab-container>-->
  </div>
</template>
   <script type="module">
// 导入 分区
import hot from "./index_children/hot";
import live from "./index_children/live";
import films from "./index_children/films";
import disease from "./index_children/disease";
import newera from "./index_children/newera";
import recommend from "./index_children/recommend";
import study from "./index_children/study";
import zhui from "./index_children/zhui";
console.log(hot);
export default {
  // window.onscroll=r=>{console.log(132);}
  name: "Index",
  props: ["scroll"],
  data() {
    return {
      selected: "my-recommend",
      l: 0,
      left: 0,
      tems: {
        "my-live": "直播",
        "my-recommend": "推荐 ",
        "my-hot": "热门",
        "my-zhui": "追番 ",
        "my-films": "影视",
        "my-disease": "抗击肺炎",
        "my-study": "学习区",
        "my-newera": "新时代"
      }
    };
  },
  mounted() {
    window.addEventListener("scroll", this.scrollTop);
  },
  methods: {
    move(e) {
      // if (e.path[0].className == "mint-tab-item-label") return;
      let x = e.touches[0].clientX;
      let w = this.$refs.lis.$el.offsetWidth - window.innerWidth;
      let lef = (this.left += x - this.l > 0 ? 10 : -10);
      this.left = lef > 0 ? 0 : lef < -w ? -w : lef;
      this.l = x;
    },
    start(e) {
      this.l = e.touches[0].clientX;
      console.log(this.selected);
    },
    scrollTop() {
      let t =
        window.pageYOffset ||
        document.body.scrollTop ||
        document.documentElement.scrollTop;
      this.$emit("scroll", t);
    }
  },
  components: {
    "my-hot": hot,
    "my-disease": disease,
    "my-films": films,
    "my-zhui": zhui,
    "my-live": live,
    "my-newera": newera,
    "my-recommend": recommend,
    "my-study": study
  }
};
</script>

<style lang='less'>
.con {
  top: 0;
  left: 0;
  overflow: hidden;
  position: relative;
  height: 3rem;
  border-bottom: 1px solid #ccc;
}
.list {
  position: absolute;
  display: flex;
  height: 100%;
  left: 0;
  a {
    width: 5rem;
    flex: none;
    flex-shrink: 0;
    transition: 0.2s;
  }
}
.mint-navbar .mint-tab-item.is-selected {
  border-bottom: 0.3rem solid green;
}
</style>